<template>
  <el-container style="height: 100%">
    <el-header class="header">
      <div class="title">鹿鲸物料制作中心</div>
      <div>
        <el-space>
          <el-dropdown size="small" split-button type="default" @command="handleCommand">
            {{ mode === 'view' ? '可视化模式' : '编码模式' }}
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="view">可视化模式</el-dropdown-item>
                <el-dropdown-item command="code">编码模式</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="success" size="small">预览</el-button>
          <el-button type="primary" size="small">保存</el-button>
          <el-button type="warning" size="small">发布</el-button>
        </el-space>
      </div>
    </el-header>
    <el-container style="height: 100%" v-if="mode === 'view'">
      <el-main class="main">
        <el-tabs :tab-position="tabPosition" style="height: 100%">
          <el-tab-pane style="padding: 0">
            <template #label>
              <span class="custom-tabs-label">
                <span>组件</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside class="right">
        <el-tabs v-model="activeName" class="demo-tabs" :stretch="true" @tab-click="handleClick">
          <el-tab-pane label="属性" name="props">
            <el-form label-width="auto" style="margin: 10px">
              <el-form-item label="物料名称">
                <el-input size="small" />
              </el-form-item>
              <el-form-item label="组件名称">
                <el-input size="small" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="事件" name="events">
            <div style="margin: 5px 10px; font-weight: bold">事件</div>

            <div style="margin: 5px 10px; font-weight: bold">方法</div>
          </el-tab-pane>
          <el-tab-pane label="详情" name="style">
            <material-detail-tab></material-detail-tab>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
    </el-container>
    <el-container v-else>
      <code-editor></code-editor>
    </el-container>
  </el-container>
</template>
<script lang="ts">
export default {
  name: 'MaterialEditor',
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import type { TabsInstance, TabsPaneContext } from 'element-plus';
import MaterialDetailTab from '../detail-tab/index.vue';
import codeEditor from '@/components/code-editor/basic-editor/index.vue';
const mode = ref<string>('code');
const tabPosition = ref<TabsInstance['tabPosition']>('left');

const activeName = ref('props');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const handleCommand = (command: string) => {
  mode.value = command;
};
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid var(--el-border-color);
  height: 38px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  align-items: center;
  .title {
    font-size: 15px;
    font-weight: bold;
    color: var(--el-color-primary);
  }
}
.main {
  padding: 0;
}
.right {
  width: 280px;
  border-left: 1px solid var(--el-border-color);
}
</style>
